<!DOCTYPE html>
<html lang="zh">
  <head>
    <style>
      html,body,#app { height: 100%; margin: 0px; padding: 0px; }
      * ::-webkit-scrollbar { width: 0px; } /* 滚动条 */
      @keyframes rotate-360 { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
      @keyframes rotate-n360 { from { transform: rotate(360deg); } to { transform: rotate(0deg); } }
    </style>
    <script>
      let htmlConfig = {
        background: '#2B2C30',
        opacity: 100,
        src: '',
        text: 'Loading...',
        textColor: '#fff'
      }
      if(htmlConfig.src){
        document.write('<link rel="icon" href="/conf/favicon.ico" /><div id="loadingApp" style="position:absolute;left:0;width:100%;height:100%;top:0;background:'+ htmlConfig.background +';opacity:'+ htmlConfig.opacity / 100 +';z-index:10000;">'+
        '<div style="height: 100%;display: flex;flex-flow: column;align-items: center;justify-content: center;">'+
          '<img src="'+ htmlConfig.src +'"/>'+
          '<div style="color: '+ htmlConfig.textColor +';margin-top:10px">'+ htmlConfig.text +'</div>'+
        '</div></div>');
      } 
      else {
        const html = '<link rel="icon" href="/conf/favicon.ico" /><div id="loadingApp" style="position:absolute;left:0;width:100%;height:100%;top:0;background:'+ htmlConfig.background +';opacity:'+ htmlConfig.opacity / 100 +';z-index:10000;">'+
        '<div style="height: 100%;display: flex;flex-flow: column;align-items: center;justify-content: center;">'+
          '<svg width="50px" height="50px">'+
              '<circle style="transform-origin: center;animation: rotate-360 1.2s linear infinite;" cx="25" cy="25" r="20" fill="transparent" stroke-width="3" stroke-dasharray="31.415, 31.415" stroke="#02bcfe" stroke-linecap="round" />'+
              '<circle style="transform-origin: center;animation: rotate-n360 1.2s linear infinite;" cx="25" cy="25" r="10" fill="transparent" stroke-width="3" stroke-dasharray="15.7, 15.7" stroke="#3be6cb" stroke-linecap="round" />'+
          '</svg>'+
          '<div style="color: '+ htmlConfig.textColor +';margin-top:10px">'+ htmlConfig.text +'</div>'+
        '</div></div>'
        document.write(html)
      }
      document.onreadystatechange = function () {
        if (document.readyState == "complete") {
          let loadingMask = document.getElementById("loadingApp");
          loadingMask.parentNode.removeChild(loadingMask);
        }
      }
    </script>
    <meta name="referrer" content="never">
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <!-- <link rel="icon" href="<%= BASE_URL %>favicon.ico" /> -->
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>
